<template>
  <div class="identityInfo">
    <van-nav-bar
        :title="$t('contact_info')"
        left-arrow
        @click-left="$router.push($route.query.backName)"
    />
    <!--     身份信息-->
    <div style="padding: 10px">
      <div class="content_list">
        <!--      选择与我的关系-->
        <div class="content_item" @click="relationClick">
          <div>
            <img class="image" src="../../assets/icon_contacts_relation.png">
            <span class="text">{{ $t('contact_relation') }}</span>
          </div>
          <div class="select_right">
            <span v-if="relation_text" class="select_right_text">{{ relation_text }}</span>
            <span v-else class="select_right_text">{{ $t('hint_select_emergency_contact_relation') }}</span>
            <van-icon name="arrow" color="#9D9D9D"/>
          </div>
        </div>
        <!--        姓名-->
        <div class="content_item">
          <div>
            <img class="image" src="../../assets/icon_contacts_name.png">
            <span class="text">{{ $t('name') }}</span>
          </div>
          <input class="input" v-model="name" :placeholder="$t('hint_input_name')"/>
        </div>
        <!--        联系电话-->
        <div class="content_item">
          <div>
            <img class="image" src="../../assets/icon_contacts_tel.png">
            <span class="text">{{ $t('contact_tel') }}</span>
          </div>
          <input class="input" v-model="mobile" :placeholder="$t('input_phone')"/>
        </div>
      </div>
      <div class="content_list" style="margin-top: 10px">
        <!--      选择与我的关系-->
        <div class="content_item" @click="relationsSpareClick">
          <div>
            <img class="image" src="../../assets/icon_contacts_relation.png">
            <span class="text">{{ $t('contact_relation') }}</span>
          </div>
          <div class="select_right">
            <span v-if="relation_spare_text" class="select_right_text">{{ relation_spare_text }}</span>
            <span v-else class="select_right_text">{{ $t('hint_select_emergency_contact_relation') }}</span>
            <van-icon name="arrow" color="#9D9D9D"/>
          </div>
        </div>
        <!--        姓名-->
        <div class="content_item">
          <div>
            <img class="image" src="../../assets/icon_contacts_name.png">
            <span class="text">{{ $t('name') }}</span>
          </div>
          <input class="input" v-model="name_spare" :placeholder="$t('hint_input_name')"/>
        </div>
        <!--        联系电话-->
        <div class="content_item">
          <div>
            <img class="image" src="../../assets/icon_contacts_tel.png">
            <span class="text">{{ $t('contact_tel') }}</span>
          </div>
          <input class="input" v-model="mobile_spare" :placeholder="$t('input_phone')"/>
        </div>
      </div>
      <van-action-sheet v-model:show="relationShow">
        <van-picker @confirm="relationConfirm" @cancel="salaryDayShow = false"
                    :columns-field-names="{  text: 'value'}"
                    :columns="selectData"/>
      </van-action-sheet>

      <van-action-sheet v-model:show="relationsSpareShow">
        <van-picker @confirm="relationsSpareConfirm" @cancel="relationsSpareShow = false"
                    :columns-field-names="{  text: 'value'}"
                    :columns="selectData"/>
      </van-action-sheet>
      <div class="confirm">
        <button @click="confirm">{{ $t('finish') }}</button>
      </div>
    </div>
  </div>
</template>

<script>
import {ref, toRefs, reactive} from 'vue'
import {useI18n} from 'vue-i18n'
import {useRoute} from 'vue-router'
import {Toast} from 'vant'
import {personalInfoSelect, saveContacts} from '@/api/home'
import {debounce, setResourcesShow,processNext} from "@/utils/tool";
import {useStore} from "vuex";
export default {
  setup() {
    const {tm} = useI18n()
    const store = useStore()
    const selectData = ref([])
    let contactsInfo = reactive({
      relation: null,
      name: null,
      mobile: null,
      relation_spare: null,
      name_spare: null,
      mobile_spare: null,
    })
    const routes = useRoute()
    const resourcesShow = ref({})
    // 选择与我的关系1
    let relationSheet = reactive({
      relationShow: false,
      relation_text:'',
      relationConfirm: ({key,value}) => {
        contactsInfo.relation = key
        relationSheet.relation_text = value
        relationSheet.relationShow = false
      },
      relationClick: () => {
        relationSheet.relationShow = true
      }
    })
    // 选择与我的关系2
    let relationsSpareSheet = reactive({
      relationsSpareShow: false,
      relation_spare_text:'',
      relationsSpareConfirm: ({key,value}) => {
        contactsInfo.relation_spare = key
        relationsSpareSheet.relation_spare_text = value
        relationsSpareSheet.relationsSpareShow = false
      },
      relationsSpareClick: () => {
        relationsSpareSheet.relationsSpareShow = true
      }
    })
    const verificationInfo = () => {
      let message = ''
      const {
        relation, name, mobile, relation_spare, name_spare, mobile_spare
      } = contactsInfo
      if (!relation) return message = tm('hint_select_emergency_contact_relation')
      if (!name) return message = tm('hint_input_name')
      if (!mobile) return message = tm('input_phone')
      if (!relation_spare) return message = tm('hint_select_emergency_contact_relation')
      if (!name_spare) return message = tm('hint_input_name')
      if (!mobile_spare) return message = tm('input_phone')
      return message
    }
    const confirm =debounce(
        async () => {
          if (!verificationInfo()) {
            const res = await saveContacts(contactsInfo)
            if (res.code === 1) {
              Toast({
                message: tm('submit_success')
              })
              processNext('contactsInfo',routes.query.backName)
            }
          } else {
            Toast({
              message: verificationInfo()
            })
          }
        }
    )
    //获取关系下拉
    const getSelect = async () => {
      const res = await personalInfoSelect({
        countryType: 2,
        type: 8,
      })
      selectData.value = res.data
      // 回显内容
      if (localStorage.getItem('userWriteInfo')) {
        const {
          contactRelativesName,
        contactRelativesPhone,
          contactFriendName,
          contactFriendPhone,
          contactRelativesRelation,
          contactFriendRelation,
        } = JSON.parse(localStorage.getItem('userWriteInfo'))
        relationSheet.relationConfirm({
          value: selectData.value.filter(i => i.key === contactRelativesRelation)[0].value,
          key: contactRelativesRelation
        })
        relationsSpareSheet.relationsSpareConfirm({
          value: selectData.value.filter(i => i.key === contactFriendRelation)[0].value,
          key: contactFriendRelation
        })
        contactsInfo.name = contactRelativesName
        contactsInfo.name_spare = contactFriendName
        contactsInfo.mobile = contactRelativesPhone
        contactsInfo.mobile_spare = contactFriendPhone
      }
    }
    // 流程显示隐藏
    const getResourcesShow = async () => {
      resourcesShow.value = await setResourcesShow(4)
      // 清除loading
      store.dispatch('changeLoading', false)
    }
    getResourcesShow()
    getSelect()
    return {
      ...toRefs(contactsInfo),
      ...toRefs(relationSheet),
      ...toRefs(relationsSpareSheet),
      selectData,
      resourcesShow,
      confirm
    }
  },
}
</script>

<style scoped lang="less">
.identityInfo {
  background-color: #f2f3f5;
  overflow: auto;

  ::v-deep .van-nav-bar {
    background: linear-gradient(90deg, #FF5252, #FF8244) !important;
    z-index: 1999;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #333333 !important;
  }

  .content_list {
    .content_item {
      height: 40px;
      border-bottom: solid 1px #f2f3f5;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;

      div {
        height: 100%;
        display: flex;
        align-items: center;

        .image {
          height: 25px;
          width: 25px;
          margin-right: 10px;
        }

        .text {
          font-size: 12px;
          font-weight: 600;
        }
      }

      .select_right_text {
        color: #9D9D9D;
        font-size: 12px;
        margin-right: 5px;
      }

      .select_right {
        margin-right: 5px;
        color: #333333;
        font-size: 12px;
        flex: 1;
        justify-content: flex-end;
      }

      .input {
        width: 100px;
        border: none;
        height: 25px;
        font-size: 12px;
        text-align: right;
      }
    }
  }

  .update_idcard {
    .update_item {
      margin-top: 10px;
      background-color: #ffffff;
      border-radius: 5px;
      text-align: center;
      padding: 5px;

      .image {
        height: 117.5px;
        width: 185px;

      }

      .text {
        color: #9D9D9D;
        font-size: 12px;
      }
    }
  }

  .confirm {
    margin-top: 20px;
    text-align: center;

    button {
      width: 300px;
      padding: 10px 0;
      color: #ffffff;
      border: none;
      font-size: 16px;
      background: linear-gradient(-45deg, #FF5252, #FF8C3C);
      box-shadow: 0px 4px 10px 0px rgba(255, 92, 78, 0.52);
      border-radius: 29px;
    }

  }
}
</style>
